<template>
  <div class="plmTable">
    <a-row :gutter="24" type="flex" class="mb6 aic" style="margin-left: 0">
      <div v-if="isRowSelection" class="dib fs12">
        已选择
        <span class="color-1989fa">{{ selectedRowKeys.length }}</span
        >条数据
        <a-button type="link" size="small" @click="onCancelSelect">
          取消选择
        </a-button>
      </div>
      <a-col flex="1">
        <slot name="btns" />
      </a-col>
    </a-row>
    <a-table
      v-dragWidth="{ columns: columns, id: tableName }"
      bordered
      size="small"
      :scroll="{ x, y }"
      :row-selection="onRowSelection()"
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      :row-key="(record, index) => index"
    >
      <span
        v-for="item in columns"
        :key="item.key"
        :slot="item.key"
        slot-scope="text, record, $index"
      >
        <slot
          v-if="item.scopedSlots"
          :record="record"
          :text="text"
          :index="$index"
          :name="item.scopedSlots.customRender"
        />
      </span>
    </a-table>
    <a-row
      v-if="$props.isPage"
      type="flex"
      class="mt10"
      justify="space-between"
    >
      <div class="fs12">
        {{
          `共${tablePage.total}条数据，第${tablePage.pageNum}/${Math.ceil((tablePage.total || 0) / tablePage.pageSize)}页`
        }}
      </div>
      <a-pagination
        v-model="tablePage.pageNum"
        size="small"
        :page-size-options="pageSizeOptions"
        show-size-changer
        show-quick-jumper
        :total="tablePage.total"
        :page-size="tablePage.pageSize"
        @change="changePage"
      />
    </a-row>
  </div>
</template>
<script>
export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    x: {
      type: String,
      default: '100%'
    },
    y: {
      type: String,
      default: '100%'
    },
    isRowSelection: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    dataSource: {
      type: Array,
      default: () => {
        return []
      }
    },
    isPage: {
      type: Boolean,
      default: true
    },
    tableName: {
      type: String,
      default: 'plmTable'
    },
    pagination: {
      type: Object,
      default: () => {
        return {
          pageNum: 1,
          pageSize: 50,
          total: 0
        }
      }
    }
  },
  data() {
    return {
      pageSizeOptions: ['10', '20', '50', '100', '150'],
      tablePage: {
        pageNum: 1,
        pageSize: 50,
        total: 0
      },
      selectedRowKeys: [],
      currentPageRowKeys: [],
      pageRows: []
    }
  },
  watch: {
    pagination: {
      handler(val) {
        this.tablePage = val
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 取消复选框
    onCancelSelect() {
      this.selectedRowKeys = []
      this.currentPageRowKeys = {}
    },
    // 支持跨页筛选
    onRowSelection() {
      if (!this.isRowSelection) {
        return null
      }
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.currentPageRowKeys[this.tablePage.current] = selectedRowKeys
          this.pageRows[this.tablePage.current] = selectedRows
          this.$emits('onRowChange', this.currentPageRowKeys, this.pageRows)
        },
        onSelect: (record, selected, selectedRows) => {
          this.$emits('onRowSelect', record, selected, selectedRows)
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          console.log(selected, selectedRows, changeRows)
        }
      }
    },

    changePage(cur, size) {
      this.tablePage.current = cur
      this.tablePage.pageSize = size
      this.$emit('changePage', cur, size)
    }
  }
}
</script>
<style lang="scss" scoped></style>
